<template>
    <el-row class="row">
        <DotLabel v-for="i in 10" :key="i" @active="active(i-1)" :is-active="actives[i-1]">
            <slot :name="i-1"></slot>
        </DotLabel>
    </el-row>
</template>

<script>
    import DotLabel from "~/components/DotLabel";

    /**
     * 此组件封装了头顶上的一排标签。
     * @v-model index 此变量表示当前被触发的标签下标（标签有且只有一个被触发）
     */
    export default {
        name: "TopLabel",
        props: {
            index: Number,
            length:{
                type:Number,
                default:10
            }
        },
        model: {
            prop: 'index'
        },
        components: {
            DotLabel
        },
        data() {
            return {
                actives: [false, false, false, false, false, false, false, false, false, false],
            }
        },
        methods: {
            active(i) {
                this.actives.forEach((value, index) => {
                    this.actives[index] = false;
                })
                this.actives[i] = true;
                this.$emit('input', i);
                this.$forceUpdate();
            }
        },
        watch: {
            index(v) {
                this.active(v);
            }
        }, mounted() {
            this.active(this.index);
        }
    }
</script>

<style scoped>

</style>
